↑ + - =

Анимация

Простые

translateX(20px)

translateY(-20px)

translate(-20px, 20px)

scaleX(-1)

scaleY(1.2)

scale(1.2, 0.5)

rotate(720deg)

skewX(20deg)

skewY(-20deg)

skew(-20deg, 20deg)

Сложные

translate(200px, -60px) scale(2, 2) rotate(720deg)

rotate(720deg) scale(0, 0)

rotate(150deg) + background-image

width, height, box-shadow

border-color, border-radius, background-color

outline-color, outline-offset

opacity

background-size

Сложные+

И еще сложнее и круче

Ат вин Та!

Код

translateX(20px)

<style> #q1{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q1:hover{ transform: translateX(20px); } </style> <div id="q1">translateX(20px)</div>

translateY(-20px)

<style> #q2{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q2:hover{ transform: translateY(-20px); } </style> <div id="q2">translateY(-20px)</div>

translate(-20px, 20px)

<style> #q3{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q3:hover{ transform: translate(-20px, 20px); } </style> <div id="q3">translate(-20px, 20px)</div>

scaleX(-1)

<style> #q4{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q4:hover{ transform: scaleX(-1); } </style> <div id="q4">scaleX(-1)</div>

scaleY(1.2)

<style> #q5{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q5:hover{ transform: scaleY(1.2); } </style> <div id="q5">scaleY(1.2)</div>

scale(1.2, 0.5)

<style> #q6{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q6:hover{ transform: scale(1.2, 0.5); } </style> <div id="q6">scale(1.2, 0.5)</div>

rotate(720deg)

<style> #q7{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q7:hover{ transform: rotate(720deg); } </style> <div id="q7">rotate(720deg)</div>

skewX(20deg)

<style> #q8{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q8:hover{ transform: skewX(20deg); } </style> <div id="q8">skewX(20deg)</div>

skewY(-20deg)

<style> #q9{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q9:hover{ transform: skewY(-20deg); } </style> <div id="q9">skewY(-20deg)</div>

skew(-20deg, 20deg)

<style> #q10{ background: #8DA2C7; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #q10:hover{ transform: skew(-20deg, 20deg); } </style> <div id="q10">skew(-20deg, 20deg)</div>

translate(200px, -60px) scale(2, 2) rotate(720deg)

<style> #w1{ background: #8DA2C7; width: 170px; height: 100px; transition: all 1s ease-in-out; transform: translate(0, 40px); text-align: center; } #w1:hover{ transform: translate(200px, -60px) scale(2, 2) rotate(720deg); } </style> <div id="w1">translate(200px, -60px) scale(2, 2) rotate(720deg)</div>

rotate(720deg) scale(0, 0)

<style> #w2{ background: #8DA2C7; width: 170px; height: 100px; transition: all 3s ease-in-out; text-align: center; } #w2:hover{ transform: rotate(720deg) scale(0, 0); } </style> <div id="w2">rotate(720deg) scale(0, 0)</div>

rotate(150deg) + background-image

<style> #w3{ background-image: url('lib/111.png'); background-size: 170px 100px; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #w3:hover{ transform: rotate(150deg); background-image: url('lib/222.png'); } </style> <div id="w3">rotate(150deg) + background-image</div>

border-color, border-radius, background-color

<style> #w4{ background-color: #B0CBC4; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; border: 5px solid transparent; } #w4:hover{ border: 5px solid #B0CBC4; background-color: #F2EBD8; border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px; } </style>

outline-color, outline-offset

<style> #w5{ background-size: 170px 100px; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; background-color: #FBE2A9; border: 5px solid #FFD18F; outline: 5px solid transparent; } #w5:hover{ outline: 5px solid #9E8463; outline-offset: 5px; } </style> <div id="w5">outline-color, outline-offset</div>

width, height, box-shadow

<style> #w6{ background-size: 170px 100px; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; background-color: #95A1B1; } #w6:hover{ transform: scale(1.2, 0.9); box-shadow: 0 15px 15px -10px rgba(0,0,0, .5); } </style> <div id="w6">width, height, box-shadow</div>

opacity

<style> #w7{ background-color: #12A1B1; background-size: 170px 100px; width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; } #w7:hover{ opacity: 0.5; } </style> <div id="w7">opacity</div>

background-size

<style> #w8{ width: 170px; height: 100px; transition: all 0.5s ease-in-out; text-align: center; background-image: radial-gradient(#9ed8d3 2px, transparent 3px); background-size: 1px 1px; } #w8:hover{ background-size: 10px 10px; } </style> <div id="w8">background-size</div>

Мем

<style> #e1{ background-image: url('lib/444.png'); background-size: 100px 100px; width: 100px; height: 100px; transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); } #e1:hover{ transform: translate(50px, 0px) skew(-20deg, 20deg); background-image: url('lib/33.png'); } </style> <div id="e1"></div>

Крипер

<style> #e2{ background-image: url('lib/555.png'); background-size: 100px 100px; width: 100px; height: 100px; transition: all 1s cubic-bezier(1, 0, 0, 1); transition-delay: 3s; } #e2:hover{ transform: scale(3, 3); background-image: url('lib/666.png'); } </style> <div id="e2"></div>

animation 1

<style> #r1{ animation: name1 5s infinite ease-in-out; border-radius: 1000px; } @keyframes name1 { from { width: 50px; height: 50px; background-color: #F498AD; } to { width: 80px; height: 80px; background-color: #2E9AFF; } } </style> <div id="r1"></div>

animation 2

<style> #r2{ animation: name2 5s infinite ease-in-out; border-radius: 1000px; } @keyframes name2 { from { width: 50px; height: 50px; background-color: #F498AD; } 50% { width: 50px; height: 80px; background-color: #7F6EDB; } to { width: 80px; height: 80px; background-color: #2E9AFF; } } </style> <div id="r2"></div>

animation 3

<style> #r3{ border-radius: 1000px; animation-name: name2; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; } @keyframes name2 { from { width: 50px; height: 50px; background-color: #F498AD; } 50% { width: 50px; height: 80px; background-color: #7F6EDB; } to { width: 80px; height: 80px; background-color: #2E9AFF; } } </style> <div id="r3"></div>

animation 4

<style> #r4{ border-radius: 1000px; animation-name: name2; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; animation-delay: -2.5s; } @keyframes name2 { from { width: 50px; height: 50px; background-color: #F498AD; } 50% { width: 50px; height: 80px; background-color: #7F6EDB; } to { width: 80px; height: 80px; background-color: #2E9AFF; } } </style> <div id="r4"></div>

animation 5

<style> #r5{ border-radius: 1000px; animation-name: name3; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; } @keyframes name3 { 0% { width: 50px; height: 50px; background-color: #F498AD; transform: scaleX(-1); } 25% { width: 10px; height: 10px; background-color: #F498AD; transform: rotate(720deg); } 50% { width: 50px; height: 50px; background-color: #F498AD; transform: scale(2.2, 2.2); } 75% { width: 50px; height: 50px; background-color: #F498AD; transform: skew(-20deg, 40deg); } 100% { width: 50px; height: 50px; background-color: #F498AD; } } </style> <div id="r5"></div>

animation 6

<style> #t1{ animation: namex 1s infinite; width: 100px; height: 100px; background-size: cover; } @keyframes namex { 0% { background-image: url('lib/1.png'); transform: translate(0px, 0px); } 16% { background-image: url('lib/2.png'); transform: translate(20px, 0px); } 32% { background-image: url('lib/3.png'); transform: translate(20px, 20px); } 48% { background-image: url('lib/4.png'); } 64% { background-image: url('lib/5.png'); transform: translate(0px, 20px); } 80% { background-image: url('lib/6.png'); } 100% { background-image: url('lib/1.png'); transform: translate(0px, 0px); } } </style> <div id="t1"></div>

animation 7

<style> #t2{ animation: namez 1s infinite; width: 128px; height: 192px; background-size: cover; } @keyframes namez { 0% { background-image: url('lib/tile000.png'); } 16% { background-image: url('lib/tile001.png'); } 32% { background-image: url('lib/tile002.png'); } 48% { background-image: url('lib/tile003.png'); } 64% { background-image: url('lib/tile004.png'); } 80% { background-image: url('lib/tile005.png'); } 100% { background-image: url('lib/tile000.png'); } } </style> <div id="t2"></div>

НАВЕРХ